<template>
  <div>
    <div class="login-head">
      <span @click="jumpFn()" style="color: #fff">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">重置密码</span>
      <span></span>
    </div>
    <div class="login-content">
      <section>
        <input type="text" placeholder="账号" v-model="userV"/>
      </section>
      <section>
        <input type="text" placeholder="旧密码" v-model="oldV"/>
      </section>
      <section>
        <input type="text" placeholder="请输入新密码" v-model="newV"/>
      </section>
      <section>
        <input type="text" placeholder="请确认密码" v-model="sureV"/>
      </section>
      <section>
        <input type="text" placeholder="验证码" v-model="codeV"/>
        <img :src="imgCode && imgCode" alt="" @click="getCode()" />
        <div class="content-rightP" @click="getCode()">
          <p>看不清</p>
          <p>换一张</p>
        </div>
      </section>
    </div>
       <div class="login-btnF">
      <van-button type="primary" @click="modify()" class="login-btn2"
        >确认修改</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "modifyPass",
  data() {
    return {
      userV: "",
      oldV: "",
      newV: "",
      sureV: "",
      codeV: "",
      imgCode: ""
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    jumpFn() {
      this.$router.back();
    },
    getCode() {
      let api = `https://elm.cangdu.org/v1/captchas`;
      this.$http({
        url: api,
        method: "post",
        //    用于用户代理是否应该在请求情况下，向其它域发送cookie，不使用缓存数据
        withCredentials: true,
      }).then((res) => {
        //   console.log(res);
        this.imgCode = res.data.code;
      });
    },
    modify(){
         let api = `https://elm.cangdu.org/v2/changepassword`;
         this.$http({
             url:api,
             method:"post",
             data:{
                 username:this.userV,
                 oldpassWord:this.oldV,
                 newpassword:this.newV,
                 confirmpassword:this.sureV,
                 captcha_code:this.codeV    
             },
             withCredentials: true,

         }).then((res)=>{
             console.log(res)
         })
    }
  },
};
</script>

<style scoped>
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
}
.login-title {
  color: white;
  position: relative;
  left: -20px;
  font-size: 20px;
}
.login-content {
  margin-top: 15px;
}
.content-rightP {
  font-size: 12px;
}
.content-rightP p:nth-child(1) {
  color: black;
}
.login-content input {
  list-style: none;
  font-size: 16px;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: 400;
  font-family: Microsoft Yahei;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  width: 65%;
  height: 20px;
}
.login-content section {
  padding: 14px 19px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-content {
  background-color: #fff;
}
.login-btn2 {
  width: 351.562px;
  margin-top: 10px;
}
.login-btnF {
  text-align: center;
}
</style>